import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import './ScheduleManagement.less';
import http from "../../model/http";
import { dateFormat } from "../../model/code";
import { Calendar } from 'react-h5-calendar'; 
import { Accordion,Flex,List,Card } from 'antd-mobile'
import Header from "../../components/header/Header";  
 
function ScheduleManagement() {
    const history = useHistory();
    const nowTimeStamp = new Date(); 
    const [dateValue, setDateValue] = useState(nowTimeStamp) 
    const [doctorListData,setDoctorListData] = useState([]) 
    // doctorTimeList
    const doctorTimeListFunc = async(t) => {
        const getDoctorDayList = await http.post('/scheduler/getAllExpertTrTime',{ 
            sch_date: t,
            deptId: history.location.state.deptId
        })  
        if(getDoctorDayList.code == '0'){
            setDoctorListData(getDoctorDayList.data) 
        }
    }


    useEffect(async () => {
        console.log('执行')
        doctorTimeListFunc(dateFormat(nowTimeStamp, 'yyyy-MM-dd'))
    }, [])
    
    const onDateClick = (d) => { 
        setDateValue(dateFormat(d.$d, 'yyyy-MM-dd')) 
        doctorTimeListFunc(dateFormat(d.$d, 'yyyy-MM-dd'))
    }

    const accordionDoctorList = () => {
        console.log('触发')
    }

    const showhtml = (htmlString) => {
        var html = { __html: htmlString };
        return <div dangerouslySetInnerHTML={html}></div>;
    }
    return (
        <div className="v-home-ScheduleManagement"> 
            <div className='body-background-div'></div>
            <Calendar 
                onDateClick={(d) => onDateClick(d)}
                showType={'month'}
                markDates={[]}
                markType="dot"
                currentDate={dateValue} 
            />
            <div className="doctor-box-schedule">
                <Accordion defaultActiveKey="0" className="my-accordion" >
                    {doctorListData.length> 0 ? doctorListData.map((item,idx) => (
                    <Accordion.Panel 
                        header={
                        <Flex>
                            <img src={item.avatar} />
                            <span>{item.expertname}</span>
                            <p>{item.counts}台手术</p>
                        </Flex> 
                        }
                        onChange={() => accordionDoctorList()}
                    >
                        {item.data.length> 0 ? item.data.map((itemData,idx) => (
                            <Card>
                            <Card.Body>
                                <div className="edit-card">
                                    <h1>时间：{itemData.sch_date} {itemData.begin_time} ~ {itemData.end_time}</h1> 
                                    <p>手术：<span>{showhtml(itemData.trnames)}</span></p>
                                    
                                    <p style={{display:'block',textAlign:'right'}}>{itemData.consult_man_name}</p>
                                </div>
                            </Card.Body>
                            <Card.Footer content={<span>麻醉类型：{itemData.hocusTypeName}</span>} extra={<div>时长：{itemData.estimate_time}分钟</div>} />
                            </Card>))
                        :''}
                    </Accordion.Panel>
                    )) 
                    :''} 
                </Accordion>
            </div>
            
            <Header /> 
        </div>
    )
}
export default ScheduleManagement;